import { useState, forwardRef, useImperativeHandle } from 'react';
import { Popup, PopupPosition } from 'react-vant';
import './index.less';
import errorImg from '../../assets/images/empty.png';
import { faultTextConvert, faultTextdescription } from '../../utils/filters.ts';

interface FaultPopProps {
  fault: any;
}

const FaultPop = forwardRef((faultProps: FaultPopProps, refparams) => {
  const { fault } = faultProps;
  const [state, setState] = useState<PopupPosition>('');
  const [phoneState, setPhoneState] = useState<PopupPosition>('');
  const onClose = () => setState('');
  const onPhoneClose = () => setPhoneState('');
  const makePhoneCall = () => {
    const phoneNumber = '400-0883-509';
    window.location.href = `tel:${phoneNumber}`;
  };
  const onPhoneShow = () => {
    onClose();
    setPhoneState('bottom');
  };

  /**
   * useImperativeHandle --->父组件调子组件的属性和方法的钩子函数
   */
  useImperativeHandle(
    refparams,
    () => {
      return {
        show: () => {
          setState('bottom');
        }
      };
    },
    []
  );

  return (
    <div className="fault-pop">
      <Popup
        visible={state === 'bottom'}
        round
        position="bottom"
        onClose={onClose}
      >
        <div className="pop">
          <div className="pop-header">告警/故障</div>
          <div className="pop-body">
            <img src={errorImg} alt="" />
            <div className="pop-body_title">{faultTextConvert(fault)}</div>
            <div className="pop-body_description">故障识别码：E{fault}</div>
            <div className="pop-body_description1">
              {faultTextdescription(fault)}
            </div>
            <div className="pop-body_button" onClick={onPhoneShow}>
              联系客服
            </div>
          </div>
          <div className="pop-footer" onClick={onClose}>
            知道了
          </div>
        </div>
      </Popup>
      <Popup
        visible={phoneState === 'bottom'}
        round
        position="bottom"
        onClose={onClose}
      >
        <div className="pop-phone">
          <div className="pop-phone-num" onClick={makePhoneCall}>
            拨打 400-0883-509
          </div>
          <div className="pop-footer" onClick={onPhoneClose}>
            知道了
          </div>
        </div>
      </Popup>
    </div>
  );
});

export default FaultPop;
